<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="/room3/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/room3/js/room/DrawLayout.js"></script>

<style type="text/css">

#canvas{ border:1px solid #ccc;width:100%}

</style>

</head>



<body>

<div id="canvasDiv"><canvas id='canvas'/></div>



<script language="javascript">
$(function(){
	

var canvasDiv = document.getElementById('canvas');


var canvasWidth = parseInt($('body').css('width')), canvasHeight=800;
// var canvasWidth =1548,canvasHeight=800;
function replaceString(mainStr,searchStr,replaceStr){
    var front=getFront(mainStr,searchStr);
    var end=getEnd(mainStr,searchStr);
    if(front!=null && end!=null){
       return front+replaceStr+end;
    }
    return null;
};
var point = {};

point.notFirst = false;



canvas.setAttribute('width', canvasWidth);

canvas.setAttribute('height', canvasHeight);

// canvas.setAttribute('id', 'canvas');
// 
// canvasDiv.appendChild(canvas);

if(typeof G_vmlCanvasManager != 'undefined') {

	canvas = G_vmlCanvasManager.initElement(canvas);

}


var layout=new DrawLayout(canvas);
layout.drawStage();

$('#canvas').mousedown(function(e){

layout.startDarwArea(e);

});



$('#canvas').mousemove(function(e){
	


  // if(paint){
// 
    // addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
// 
    // redraw();
// 
  // }
  	layout.move(event);
	layout.drawArea(e);
});


function drawArea(){
	
	context.fillRect(startPoint.x,startPoint.y,endPoint.x-startPoint.x,endPoint.y-startPoint.y);
}


$('#canvas').mouseup(function(e){
layout.addPlane();
layout.startPoint={x:null,y:null};
// $('#canvas').unbind('mousemove');

});



$('#canvas').mouseleave(function(e){

  paint = false;

});



var clickX = new Array();

var clickY = new Array();

var clickDrag = new Array();

var paint;



function addClick(x, y, dragging)

{

  clickX.push(x);

  clickY.push(y);

  clickDrag.push(dragging);

}



function redraw(){

  //canvas.width = canvas.width; // Clears the canvas

  

  context.strokeStyle = "#df4b26";

  context.lineJoin = "round";

  context.lineWidth = 5;

  

  while (clickX.length > 0 ) {

	  point.bx = point.x;

	  point.by = point.y;

	  point.x = clickX.pop();

	  point.y = clickY.pop();

	  point.drag = clickDrag.pop();

	  context.beginPath();

	  if (point.drag && point.notFirst) {

		  context.moveTo(point.bx, point.by);

	  } else {

		  point.notFirst = true;

		  context.moveTo(point.x - 1, point.y);

	  }

     context.lineTo(point.x, point.y);

     context.closePath();

     context.stroke();

 }

/*

  for(var i=0; i < clickX.length; i++)

  {		

    context.beginPath();

    if(clickDrag[i] && i){

      context.moveTo(clickX[i-1], clickY[i-1]);

     }else{

       context.moveTo(clickX[i]-1, clickY[i]);

     }

     context.lineTo(clickX[i], clickY[i]);

     context.closePath();

     context.stroke();

  }

  */

}
});
</script>

</body>

</html>

